<template>
	<div class="imgbox">
		<div class="grid" :class="{'four': list.length === 4, 'one': list.length === 1}" v-if="!boxIsOpen">
			<div 
			class="img" 
			v-for="(url, index) of list" 
			@click="setIndex(index)"
			:style="{
				backgroundImage: 'url('+ basicPath + url +')'
			}"
			:key="'img' + index">
			</div>
		</div>
		<div class="box" v-if="boxIsOpen">
			<div class="menu">
				<div class="item" @click="closeBox()">
					<eva-icon name="collapse" fill="#2979FF"></eva-icon>
					<span>收起</span>
				</div>
				<div class="item">
					<eva-icon name="search" fill="#2979FF"></eva-icon>
					<span>查看大图</span>
				</div>
				<div class="item" @click="rotate(-1)">
					<eva-icon name="corner-left-down" fill="#2979FF"></eva-icon>
					<span>向左旋转</span>
				</div>
				<div class="item" @click="rotate(1)">
					<eva-icon name="corner-right-down" fill="#2979FF"></eva-icon>
					<span>向右旋转</span>
				</div>
			</div>
			<div class="img">
				<div class="left" v-if="now > 0" @click="now -= 1, rotateState = 0"></div>
				<img :class="'r' + rotateState" :src="basicPath + list[now]" alt="动态图片" @click="closeBox()"/>
				<div class="right" v-if="now < list.length - 1" @click="now += 1, rotateState = 0"></div>
			</div>
			<div class="index" v-if="list.length > 1">
				<div 
					class="img" 
					v-for="(url, index) of list" 
					:class="{'now': index === now}"
					@click="setIndex(index)"
					:style="{
						backgroundImage: 'url('+ basicPath + url +')'
					}"
					:key="'img' + index">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'ImageBox',
	props: {
		list: Array
	},
	data: function () {
		return {
			basicPath: this.$store.state.basicPath,
			now: 0,
			rotateState: 0,
			boxIsOpen: false,
		}
	},
	methods: {
		setIndex: function (i) {
			this.boxIsOpen = true;
			this.now = i;
		},
		closeBox: function () {
			this.boxIsOpen = false;
		},
		rotate: function(state) {
			this.rotateState += state;
			if (this.rotateState > 3) this.rotateState = 0;
			if (this.rotateState < 0) this.rotateState = 3;
		}
	}
}
</script>

<style lang="scss">
.imgbox {
	// background-color: #42B98341;
	
	.grid {
		display: grid;
		grid-template-columns: repeat(3, 7rem);
		grid-gap: 0.5rem;
		
		> .img {
			width: 7rem;
			height: 7rem;
			border-radius: 0.3rem;
			cursor: zoom-in;
			overflow: hidden;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}
		
		&.four {
			grid-template-columns: repeat(2, 7rem);
		}
		
		&.one {
			grid-template-columns: 14rem;
			grid-template-rows: 10rem;
			
			> .img {
				width: 14rem;
				height: 10rem;
			}
		}
	}
	
	.box {
		.menu {
			display: flex;
			background-color: #E3F2FD;
			color: #2979FF;
			font-size: 0.9rem;
			user-select: none;
			
			.item {
				display: flex;
				line-height: 2.5rem;
				padding: 0 0.5rem;
				cursor: pointer;
			}
				
			i {
				display: grid;
				place-items: center;
				margin-right: 0.3rem;
			}
		}
		
		> .img {
			position: relative;
			display: grid;
			place-items: center;
			background-color: #E3F2FD;
			user-select: none;
			
			.left {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				// background: #00000020;
				width: 30%;
				cursor: url(), url("//s1.hdslb.com/bfs/static/blive/live-assets/canvas/photo-imager/cursor.left.cur?v1"), pointer;
			}
			
			.right {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				// background: #00000020;
				width: 30%;
				cursor: url(), url("//s1.hdslb.com/bfs/static/blive/live-assets/canvas/photo-imager/cursor.right.cur?v1"), pointer;
			}
			
			> img {
				max-width: 100%;
				max-height: 40rem;
				cursor: zoom-out;
				
				&.r1 {
					transform: rotate(90deg);
				}
				
				&.r2 {
					transform: rotate(180deg);
				}
				
				&.r3 {
					transform: rotate(270deg);
				}
			}
		}
		
		.index {
			display: flex;
			padding: 0.5rem 0 0.5rem 1%;
			
			> .img {
				height: 0;
				width: 10%;
				padding-bottom: 10%;
				margin-right: 1%;
				cursor: pointer;
				border-radius: 0.3rem;
				opacity: 0.5;
				box-sizing: content-box;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
				
				&.now {
					border: solid 1px #2979FF;
					opacity: 1;
				}
			}
		}
	}
}
</style>
